<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
                <el-input
                        placeholder="请输入用户名"
                        v-model="ruleForm.username"
                >
                    <i slot="prefix" class="el-icon-user"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        show-password
                        placeholder="请输入密码"
                        v-model="ruleForm.password"
                >
                    <i slot="prefix" class="el-icon-lock"></i>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                        type="primary"
                        style="width:100%"
                        @click="login"
                >
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "accountLogin",
        props: {
            ruleForm: { // 表单对象
                type: Object,
                required: true
            },
            rules: { // 验证对象
                type: Object,
                required: true
            }
        },
        methods: {
            login() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.$emit('submit')
                    } else {
                        this.$emit('errorHandle')
                    }
                })
            }
        }

    }
</script>

<style scoped>

</style>
